<script setup>
import { useRouter } from 'vue-router/composables'
import { SentimentLevelList, WorkerOrderStatus } from '@/common'
const { isCreateRole } = usePermissionStore()
import { useOrderFromStore } from '@/stores/orderFrom'
import { Toast } from 'vant'
import { getInfoType, getLevelApi } from '@/apis/order.js'
import CustomTextarea from '@/views/workOrder/components/CustomTextarea.vue'
import RemoteSelect from '@/views/supervise/components/RemoteSelect.vue'
import { usePermissionStore } from '@/stores/permission.js'
import MIcon from '@/components/MIcon.vue'
import SourceSelect from '@/views/workOrder/components/SourceSelect.vue'
import MButton from '@/components/MButton.vue'
const { formInfo } = useOrderFromStore()
const router = useRouter()

const isShowType = ref(false)
const isShowLevel = ref(false)
const isShowSource = ref(false)
const orderInputOneRef = ref('')

const state = reactive({
  tableData: [],
  sourceTypeData: [], // 舆情来源
  infoTypeData: [], // 舆情类别
  workerOrderStatues: WorkerOrderStatus,
  sentimentLevelLists: SentimentLevelList,
  disposeOrderFilterData: [], // 单位
  infoLevelData: [], // 单位
  infoLevel: '',
  infoType: '',
  sourceType: '',

  formField: {
    infoLevel: '',
    infoType: '',
    sourceType: ''
  },
  rules: {
    newOld: [{ required: true, message: '新闻或旧闻不能为空！' }],
    infoType: [{ required: true, message: '舆情类别不能为空！' }],
    infoLevel: [{ required: true, message: '舆情级别不能为空！' }],
    sourceType: [{ required: true, message: '舆情来源不能为空！' }],
    memo: [{ required: true, message: '热搜或热度情况描述不能为空！' }]
  }
})

// 跳转到下一步
const goNext = () => {
  orderInputOneRef.value
    .validate()
    .then(async () => {
      formInfo.firstFormField = state.formField
      formInfo.fileNames = {
        infoLevel: state.infoLevel,
        infoType: state.infoType,
        sourceType: state.sourceType
      }
      await router.replace('/workOrder/formTow')
    })
    .catch((error) => {
      Toast(error[0].message)
    })
}
const handleInfoTypeConfirm = (item) => {
  state.infoType = item[0].label
  state.formField.infoType = item[0].value
  isShowType.value = false
}
const handleInfoLevelConfirm = (item) => {
  state.infoLevel = item[0].label
  state.formField.infoLevel = item[0].value
  isShowLevel.value = false
}

onMounted(async () => {
  if (!isCreateRole) {
    Toast('账号没有操作权限！')
    await router.replace('/home')
    return
  }
  state.formField = formInfo.firstFormField
  state.infoLevel = formInfo.fileNames.infoLevel
  state.infoType = formInfo.fileNames.infoType
  state.sourceType = formInfo.fileNames.sourceType
})
</script>

<template>
  <section class="w-full p-0 pt-64px direction-column min-h-screen bg-#F8F9FC">
    <div
      class="bg-white shadow-[10px_0_16px_0_rgba(0,0,0,0.06)] z-10 absolute top-0 left-0 h-56px w-full box-border flex items-center px-16px"
    >
      <span class="text-#229F60 text-20px font-400 leading-20px pr-3px pb-3px">
        1
      </span>
      <span class="text-#54565C text-16px font-400 leading-20px pr-10px">
        / 2
      </span>
      <span class="text-#1E2226 text-16px font-600 leading-20px">舆情研判</span>
    </div>
    <van-form
      ref="orderInputOneRef"
      scroll-to-error
      :show-error-message="false"
      validate-first
      class="pb-85px"
    >
      <van-field
        label="新闻或旧闻"
        required
        :rules="state.rules.newOld"
        name="newOld"
        input-align="right"
      >
        <template #input>
          <van-radio-group
            v-model="state.formField.newOld"
            direction="horizontal"
          >
            <van-radio name="1" checked-color="#ee0a24">
              新闻
              <template #icon="props">
                <span class="text-16px">
                  <m-icon :name="props.checked ? 'select-ok' : 'select-no'" />
                </span>
              </template>
            </van-radio>
            <van-radio name="2" checked-color="#ee0a24">
              旧闻
              <template #icon="props">
                <span class="text-16px">
                  <m-icon :name="props.checked ? 'select-ok' : 'select-no'" />
                </span>
              </template>
            </van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        readonly
        name="infoType"
        v-model="state.infoType"
        :rules="state.rules.infoType"
        label="舆情类别"
        required
        placeholder="请选择"
        is-link
        input-align="right"
        @click="isShowType = true"
      >
      </van-field>

      <van-field
        readonly
        required
        name="infoLevel"
        v-model="state.infoLevel"
        :rules="state.rules.infoLevel"
        label="舆情级别"
        placeholder="请选择"
        is-link
        input-align="right"
        @click="isShowLevel = true"
      >
      </van-field>

      <van-field
        readonly
        required
        name="sourceType"
        v-model="state.sourceType"
        :rules="state.rules.sourceType"
        label="舆情来源"
        placeholder="请选择"
        is-link
        input-align="right"
        @click="isShowSource = true"
      >
      </van-field>
      <div class="bg-white mt-10px">
        <CustomTextarea
          label="主流新闻媒体关注转发情况"
          :modelValue.sync="state.formField.newsForwardRemark"
        />
      </div>
      <div class="bg-white mt-10px">
        <CustomTextarea
          required
          label="热搜或热度情况描述"
          :modelValue.sync="state.formField.memo"
          :rules="state.rules.memo"
        />
      </div>
    </van-form>
    <div class="fixed bottom-0 w-full px-16px py-8px box-border bg-white">
      <MButton mClass="w-full h-40px" @click="goNext">下一步</MButton>
    </div>
    <!-- 舆情类型 -->
    <RemoteSelect
      :show.sync="isShowType"
      :model-value.sync="state.infoTypeData"
      :api="() => getInfoType()"
      :key-label="['dictLabel', 'dictValue']"
      key-value="dictValue"
      :multiple="false"
      @confirm="handleInfoTypeConfirm"
      title="选择舆情类别"
    />

    <!-- 舆情来源 -->
    <SourceSelect
      title="选择舆情来源"
      :model-value.sync="state.sourceTypeData"
      :show.sync="isShowSource"
      :names.sync="state.sourceType"
      :values.sync="state.formField.sourceType"
      @confirm="isShowSource = false"
    />

    <!-- 舆情级别 -->
    <RemoteSelect
      :show.sync="isShowLevel"
      :model-value.sync="state.infoLevelData"
      :api="() => getLevelApi()"
      :key-label="['dictLabel', 'dictValue']"
      key-value="dictValue"
      :multiple="false"
      @confirm="handleInfoLevelConfirm"
      height="30%"
      title="选择舆情级别"
    />
  </section>
</template>

<style scoped lang="less">
:deep(.van-cell::after) {
  right: 0;
  left: 0;
}
.van-cell--required {
  &::before {
    content: '';
  }
  &:deep(.van-cell__title) {
    span::after {
      position: relative;
      right: -2px;
      top: 0;
      color: #ee0a24;
      content: '*';
    }
  }
}
.field-label {
  margin-bottom: 8px; /* 调整标签和输入框之间的间距 */
}
</style>
